<!DOCTYPE html>
<html>
    <head>
        <title>毕业照</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="keywords" content="毕业照">
        <meta name="description" content="毕业照">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=720px, user-scalable=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta content="email=no" name="format-detection">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="screen-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="x5-orientation" content="portrait">
        <meta name="x5-fullscreen" content="true">
        <meta name="x5-page-mode" content="app">
    <script>
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var url = window.location.search.replace(/&amp;(amp;)?/g,"&");
            var r = url.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        if(!getQueryString("openid")) {
            window.location.href='/Wap/Applications/wxAuthJoin';
        }
    </script>
    <script src="/Public/projects/join/js/flexible.js"></script>
    <link rel="stylesheet" href="/Public/projects/join/css/animate.css">
    <link rel="stylesheet" href="/Public/projects/join/css/swiper.min.css">
    <link rel="stylesheet" href="/Public/projects/join/css/index.css">
</head>
<body>
    <div class="container">
        <div class="loading">
            <div class="progress-box">
                <div class="camera-box">
                    <div class="camera"></div>
                    <div class="tip"></div>
                </div>
                <div class="progress-bar">
                    <div class="progress-rate" id="progress-rate" style="width: 100%;"><div class="midea-logo"></div></div>
                </div>
                <div class="num-box">
                    <div id="loading-rate" class="num">
                        <img src="/Public/projects/join/images/loading_num_1.png" alt="">
                        <img src="/Public/projects/join/images/loading_num_0.png" alt="">
                        <img src="/Public/projects/join/images/loading_num_0.png" alt=""></div>
                    <div class="num-unit"><img src="/Public/projects/join/images/loading_num_unit.png"></div>
                </div>
                <p><img src="/Public/projects/join/images/loading_text.png"></p>
            </div>
        </div>
        <div class="page activity active">
            <div class="activity-content">
                <div class="activity-title-box">
                    <div class="activity-title-bg"></div>
                    <div class="activity-title-text"></div>
                    <div class="activity-photo"></div>
                </div>
                <div class="button-box">
                    <!--<div class="intro-btn button button-white">活动介绍</div>-->
                    <div class="make-btn button button-yellow">制作毕业照</div>
                </div>
            </div>
            <div class="activity-intro">
                <div class="activity-intro-title"><img src="/Public/projects/join/images/intro_title.png"></div>
                <div class="activity-intro-content">
                    <div class="activity-intro-txt">
                        <img src="/Public/projects/join/images/intro_content.png" width="100%">
                    </div>
                </div>
                <div class="button-box">
                    <div class="activity-intro-close button button-yellow">关闭</div>
                </div>
            </div>
        </div>
        <div class="page author">
            <div class="author-content">
                <div class="author-form">
                    <div class="author-form-pen"></div>
                    <div class="author-info-input">
                        <input type="text" name="school" placeholder="你的母校与院系名">
                        <input type="text" name="class" placeholder="XX届XX班，宿舍亦可">
                        <input type="text" name="name" placeholder="你的姓名">
                    </div>
                    <div class="photo-num-input clearfix">
                        <input type="number" name="number" maxlength="2" placeholder="50人以内">
                    </div>
                </div>
                <div class="author-form-tip">
                    <table>
                        <tbody><tr>
                            <td><img src="/Public/projects/join/images/author_form_tip.png"></td>
                            <td><p>仅“青春号召人”填写，所输入学校班级将显示在毕业照上方，一个ID仅可发起一次活动，参与活动次数则不受限制。</p></td>
                        </tr>
                        </tbody></table>
                </div>
            </div>
            <div class="button-box">
                <div class="upload-btn button button-yellow">开始制作毕业照</div>
            </div>
        </div>
        <div class="page sex">
            <div class="sex-select-box">
                <div class="sex-boy-btn sex-btn active"><img src="/Public/projects/join/images/sex_boy.png"></div>
                <div class="sex-girl-btn sex-btn"><img src="/Public/projects/join/images/sex_girl.png"></div>
                <div class="clearfix"></div>
                <p>请选择你的性别</p>
            </div>
            <div class="button-box">
                <div class="button button-yellow">下一步</div>
            </div>
        </div>
        <div class="page chooseHead">
            <div class="content">
                <img id="detect-face-img" src="" alt="">
                <div class="student">
                    <div id="gestureArea" class="student-head">
                        <div class="student-face">
                            <div class="student-face-upload">
                                <canvas id="uploadCanvas" width="326" height="410"></canvas>
                                <canvas id="previewCanvas" width="326" height="410"></canvas>
                            </div>
                            <div id="uploadCover" class="student-face-cover"><img src="/Public/projects/join/images/face.png" alt=""></div>
                        </div>
                        <div class="student-hair">
                            <div class="hair-pic"><img src="/Public/projects/join/images/hair_01.png"></div>
                            <div class="hair-pic"><img src="/Public/projects/join/images/hair_02.png"></div>
                            <div class="upload-face-btn">
                                <input id="chooseButton" type="file" accept="image/*">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="button-box">
                    <div id="reupload" class="button button-white">重新上传<input id="rechooseButton" type="file" accept="image/*"></div>
                    <div id="uploadButton" class="button button-yellow">下一步</div>
                </div>
            </div>
        </div>
        <div class="page chooseHair">
            <div class="chooseHair-title choose-title"><img src="/Public/projects/join/images/choose_hair_title.png"></div>
            <div class="student">
                <div class="student-head">
                    <div class="student-face">
                        <div class="student-face-upload"><img src=""></div>
                        <div class="student-face-cover"><img src="/Public/projects/join/images/face.png" alt=""></div>
                    </div>
                    <div class="student-hair">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_01.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_02.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_03.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_04.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_05.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_06.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_07.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_08.png"></div></div>
                                <div class="swiper-slide"><div class="hair-pic"><img src="/Public/projects/join/images/hair_09.png"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-white swiper-button-prev"></div>
                <div class="swiper-button-white swiper-button-next"></div>
            </div>
            <div class="button-box">
                <div class="button button-white">上一步</div>
                <div class="choosehair-next button button-yellow">下一步</div>
            </div>
        </div>
        <div class="page preview">
            <div class="preview-container">
                <div class="preview-halo"></div>
                <div class="preview-frame">
                    <div class="preview-photo-wrap" id="photoWrapper">
                        <div class="preview-photo">
                            <div class="photo-wrap"><img id="photo" src="" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-box confirm-btns active">
                <div id="remake" class="button button-white">重新制作</div>
                <div id="submitData" class="button button-yellow">确定生成</div>
            </div>
            <div class="button-box invite-btns">
                <div class="button button-white wxshare-tip">邀请同学加入</div>
                <div class="button button-yellow wxshare-tip">分享到朋友圈</div>
            </div>
            <div id="qrcode"></div>
            <canvas id="txtCanvas" width="2398" height="1795"></canvas>
        </div>
        <div class="page friends">
            <div class="preview-container">
                <div class="preview-halo"></div>
                <div class="preview-frame">
                </div>
                <div class="friends-share-tip"><img src="/Public/projects/join/images/friends_share_tip.png"></div>
            </div>
            <div class="preview-photo-wrap">
                <img src="" alt="">
            </div>
            <div class="button-box">
                <!--<div class="button button-white">已保存</div>-->
            </div>
        </div>
        <div class="dialog-page share-dialog"></div>
        <div class="dialog-page merge-dialog">
            <div class="merge-dialog-tip">
                <div class="merge-dialog-rotate"></div>
            </div>
        </div>
        <div id="audio-music" class="active">
            <audio id="bgMusic" preload="auto" autoplay="" loop="" src="/Public/audio/join/bg_music.mp3"></audio>
        </div>
    </div>

    <script src="/Public/projects/join/js/zepto.min.js"></script>
    <script src="/Public/projects/join/js/interact.min.js"></script>
    <script src="/Public/projects/join/js/easeljs0.8.2.min.js"></script>
    <script src="/Public/projects/join/js/exif.js"></script>
    <script src="/Public/projects/join/js/iscroll_zoom.js"></script>
    <script src="/Public/projects/join/js/uploadBox.js?id=1"></script>
    <script src="/Public/projects/join/js/mergeImages.js"></script>
    <script src="/Public/projects/join/js/swiper.min.js"></script>
    <script src="/Public/projects/join/js/qrcode.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="/Public/projects/join/js/api.js?id=1"></script>
    <script src="/Public/projects/join/js/index.js?v=3"></script>
</body>
</html>